<template>
  <div class="statio">
    <div class="search">
      <el-button type="primary" @click="addDeparture" plain class="personLeave" size="small">办理离职</el-button>
    </div>
    <base-table ref="baseTable" :tableSetting="tableSetting" @handleCommon="handleCommon"></base-table>
    <!-- 查看详情弹框 -->
    <el-dialog
      title="入职登记"
      :close-on-click-modal="false"
      :show-close="true"
      :visible.sync="dialogStations"
      class="postionbots"
      width="500px"
      center
      @close="close('form')"
    >
      <el-form status-icon ref="form" :model="form" label-width="120px" class="demo-ruleForm">
        <el-form-item label="账号 :">
          <label>{{form.userName}}</label>
        </el-form-item>
        <el-form-item label="姓名 :">
          <label>{{form.name}}</label>
        </el-form-item>
        <el-form-item label="身份证 :">
          <label>{{form.idCard}}</label>
        </el-form-item>
        <el-form-item label="岗位 :">
          <label>{{form.deptName}}</label>
        </el-form-item>
        <el-form-item label="入职日期 :">
          <label>{{form.entryDate}}</label>
        </el-form-item>
        <el-form-item label="手机号 :">
          <label>{{form.phone}}</label>
        </el-form-item>
        <el-form-item label="性别 :">
          <label v-if="form.sex==1">男</label>
          <label v-if="form.sex==2">女</label>
        </el-form-item>
        <el-form-item label="出生日期 :">
          <label>{{form.birthday}}</label>
        </el-form-item>
        <el-form-item label="学历 :">
          <label v-if="form.edu==1">大专</label>
          <label v-if="form.edu==2">本科</label>
          <label v-if="form.edu==3">硕士</label>
          <label v-if="form.edu==4">博士</label>
        </el-form-item>
        <el-form-item label="QQ账号">
          <label>{{form.qqAccount}}</label>
        </el-form-item>
        <el-form-item label="邮箱">
          <label>{{form.email}}</label>
        </el-form-item>
        <el-form-item label="职称">
          <label>{{form.title}}</label>
        </el-form-item>
        <el-form-item label="入职登记表附件 :" class="entLeft">
          <img :src="form.entryRegForm" class="avatar" />
        </el-form-item>
        <el-form-item label="学历扫描附件 :" class="entRight">
          <img :src="form.eduAnnex" class="avatar" />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogStations=false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 办理离职 -->
    <el-dialog
      title="办理离职"
      :visible.sync="dialogleave"
      width="600px"
      center
      :close-on-click-modal="false"
    >
      <el-form
        status-icon
        ref="form"
        :model="form"
        label-width="120px"
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item label="选择员工" prop="uid">
          <el-select class="filter-item" v-model.trim="form.uid" placeholder="请选员工">
            <el-option v-for="attr in dictEmp" :key="attr.id" :label="attr.name" :value="attr.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="离职日期" prop="quitTime">
          <el-date-picker
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择离职日期"
            v-model="form.quitTime"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="离职申请表：" prop="quitForm">
          <el-upload
            :headers="headers"
            class="avatar-uploader"
            action="/api/upload/uploadFile/3"
            :show-file-list="false"
            :on-success="quitFormSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="close('form')">取消</el-button>
        <el-button type="primary" @click="leaves('form')" :loading="loading">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="离职申请表"
      :visible.sync="dialogleaveWork"
      :close-on-click-modal="false"
      width="600px"
      center
    >
      <img :src="form.quitForm" width="550px" height="auto" />
      <span slot="footer">
        <el-button @click="dialogleaveWork=false">关闭</el-button>
      </span>
    </el-dialog>

    <edit-dialog ref="editDialog" @editSuccess="editSuccess" />
  </div>
</template>

<script>
import baseTable from "@/components/table/baseTable";
import EditDialog from "./components/editDialog";
import {
  selectAllEmp,
  selectQuitList,
  resignation,
  selectEmpInfoById,
} from "@/service/Api.js"; //接口
import md5 from "js-md5";

export default {
  components: { baseTable, EditDialog },
  name: "personnelMent",
  data() {
    return {
      headers: {
        "API-User-Token": sessionStorage.getItem("token"), //文件上传需携带token
      },
      tableSetting: {
        tableApiFn: selectQuitList,
        options: [
          { prop: "id", label: "员工编号" },
          { prop: "name", label: "姓名" },
          { prop: "postName", label: "岗位" },
          { prop: "quitTime", label: "离职日期" },
        ],
        width: "300",
        btns: [
          {
            text: "编辑",
            size: "mini",
            handleName: "editMessages",
            type: "success",
            plain: "plain",
          },
          {
            text: "查看离职申请表",
            size: "mini",
            handleName: "btnTermination",
            type: "info",
            plain: "plain",
          },
          {
            text: "查看详情",
            size: "mini",
            handleName: "btnSelect",
            type: "primary",
            plain: "plain",
          },
        ],
      },
      dialogStations: false, //离职员工详情
      dialogleave: false, //离职办理
      dialogleaveWork: false, //离职申请表弹框
      loading: false,
      dictEmp: [],
      fileList: [],
      imageUrl: "",
      form: {
        // 离职办理
        uid: "", // 员id
        quitTime: "", // 离职日期
        quitForm: "", // 离职申请表
        // 员工详情
        userName: "", //账号
        name: "", //姓名
        idCard: "",//身份证
        deptName: "", //岗位
        phone: "", //手机号
        sex: "", //性别
        birthday: "", //生日
        edu: "", //学历
        qqAccount: "", //QQ
        email: "", //邮箱
        entryRegForm: "", //入职登记表附件
        eduAnnex: "", //学历扫描附件
      },
      rules: {
        quitTime: [
          { required: true, message: "请选择离职日期", trigger: "blur" },
        ],
        uid: [{ required: true, message: "请选择员工", trigger: "blur" }],
        quitForm: [
          { required: true, message: "请上传离职申请表", trigger: "blur" },
        ],
      },
      id: "",
    };
  },
  methods: {
    //修改员工离职信息
    editMessages(row) {
      this.$refs.editDialog.showDialog(row);
    },
    //离职申请表
    btnTermination(row) {
      this.form.quitForm = row.quitForm;
      this.dialogleaveWork = true;
    },
    handleCommon(name, row, idx) {
      if (this[name]) {
        this[name](row, idx);
      }
    },
    //上传格式及大小
    beforeAvatarUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "jpg";
      const extension2 = testmsg === "png";
      const extension3 = testmsg === "pdf";
      const isLt5M = file.size / 1024 / 1024 < 100;
      if (!extension && !extension2 && !extension3) {
        this.$message({
          message: "上传文件只能是 jpg、png、pdf格式!",
          type: "warning",
        });
      }
      if (!isLt5M) {
        this.$message({
          message: "上传文件大小不能超过 5MB!",
          type: "warning",
          offset: "500px",
        });
      }
      return extension || extension2 || (extension3 && isLt5M);
    },

    //上传离职申请表
    quitFormSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      if (res.code == 0) {
        // this.form.quitForm = `http://192.168.1.240/storage/public/${res.data.fileIds}`;
        this.form.quitForm = res.data.fileIds;
      } else {
        this.$message.error(res.message);
      }
    },
    //查看员工详情
    btnSelect(row) {
      selectEmpInfoById(row.id).then((res) => {
        this.form = res.data;
        this.form.deptName = res.data.deptName;
        console.log(this.form);
      });
      this.dialogStations = true;
    },
    //关闭弹框
    close(formName) {
      this.$refs[formName].resetFields();
      this.imageUrl = "";
      this.dialogStations = false;
      this.dialogleave = false;
    },
    //员工列表
    selemt() {
      selectAllEmp().then((res) => {
        if (res.code == 0) {
          this.dictEmp = res.data;
        } else {
          this.$message.warning(red.message);
        }
      });
    },
    //办理离职
    addDeparture() {
      this.form.quitForm = "";
      this.selemt();
      this.dialogleave = true;
    },
    editSuccess() {
      this.$refs.baseTable.initData();
    },
    leaves(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            uid: this.form.uid,
            quitTime: this.form.quitTime,
            quitForm: this.form.quitForm,
          };
          resignation(data).then((res) => {
            if (res.code == 0) {
              this.$message.success("操作成功!");
              this.close("form");
              this.$refs.baseTable.initData();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
}
.avatar {
  width: 110px;
  height: 110px;
  display: block;
  margin-top: 15px;
}
.postionbot {
  margin-top: 2%;
}

.postionbot::-webkit-scrollbar {
  display: none;
}

.postionbots .el-form-item {
  margin-bottom: 1px;
}
.dialog-footer {
  margin-top: 20%;
  display: block;
}
.personLeave {
  margin-bottom: 15px;
}
</style>
